import { useState, SetStateAction, Dispatch, Key } from 'react';
import { InfiniteScroll, List, Image, Tag, Ellipsis } from 'antd-mobile-v5';
import { SearchOutline, FilterOutline } from 'antd-mobile-icons';
import request from 'umi-request';
import styles from './list.less';
import { params } from '../interface';
import { teachUrl } from '../utils/urls';

export default function list(props: {
  setVisible: Dispatch<SetStateAction<boolean>>;
  params: params;
  setParams: Dispatch<SetStateAction<params>>;
  data: string[];
  setData: Dispatch<SetStateAction<string[]>>;
  hasMore: boolean;
  setHasMore: Dispatch<SetStateAction<boolean>>;
}) {
  const { setVisible, setParams, params, data, setData, hasMore, setHasMore } =
    props;

  const [inputValue, setInputValue] = useState('');

  const inputChnage = (e: { target: { value: SetStateAction<string> } }) => {
    setInputValue(e.target.value);
  };
  const setName = () => {
    setHasMore(true);
    setParams((val) => ({ ...val, username: inputValue, pageNo: 0 }));
    if (inputValue) {
      setData([]);
    }
    setInputValue('');
  };
  async function loadMore() {
    const append = await request.get(teachUrl, {
      params: { ...params, pageNo: ++params.pageNo },
    });

    setData((val: any) => [...val, ...(append?.data.List || [])]);
    setHasMore(append.data.List.length > 0);
  }
  return (
    <div>
      <List>
        <span className={styles['search-input']}>
          <SearchOutline />
          <input type="text" value={inputValue} onChange={inputChnage} />
          <button onClick={setName}>搜索</button>
        </span>
        <span
          onClick={() => {
            setVisible(true);
          }}
        >
          <span style={{ margin: '0 10px 0 14px' }}>筛选</span>
          <FilterOutline />
        </span>
        {data.map((item: any, index: Key | null | undefined) => (
          <List.Item key={index}>
            <div style={{ display: 'flex' }}>
              <span>
                <Image
                  src={item.img}
                  width={64}
                  height={64}
                  fit="cover"
                  style={{ borderRadius: 32 }}
                />
              </span>
              <div style={{ alignSelf: 'center', marginLeft: 5 }}>
                <div>{item.username}</div>
                <div>{item.position}</div>
              </div>
            </div>
            <Ellipsis
              direction="end"
              content={item.introduce}
              expandText="展开"
              collapseText="收起"
            />
            {item.tags.map((item1: string) => (
              <Tag
                round
                color="#2db7f5"
                style={{ marginRight: 10 }}
                key={item1}
              >
                {item1}
              </Tag>
            ))}
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  );
}
